﻿@{
    ViewBag.Title = "MailInfo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="@Url.Content("~/Assets/js/pages/mailbox.js")"></script>
<div class="page-header">
    <div class="pull-left">
        <ol class="breadcrumb visible-sm visible-md visible-lg">
            <li><a href="index.html"><i class="icon fa fa-home"></i>Home</a></li>
            <li class="active"><a href="#"><i class="fa fa-envelope"></i>Mail</a></li>
        </ol>
    </div>
    <div class="pull-right">
        <h2>邮件详情</h2>
    </div>
</div>
<div class="row mailbox">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <div class="panel">
            <div class="panel-body bk-bg-very-light-gray mailbox-menu">
                <a href="page-inbox-compose.html" class="btn btn-primary btn-block">Compose</a>
                <ul>
                    <li>
                        <a href="page-inbox.html">发件箱<span class="label label-primary">165</span></a>
                    </li>
                    <li>
                        <a href="page-inbox.html">收件箱<span class="label label-dark">9</span></a>
                    </li>
                    <li>
                        <a href="page-inbox-compose.html#">发送邮件</a>
                    </li>
                    <li>
                        <a href="page-inbox-compose.html#">收藏夹<span class="label label-info">7</span></a>
                    </li>
                    <li>
                        <a href="page-inbox-compose.html#">草稿箱<span class="label label-warning">3</span></a>
                    </li>
                    <li>
                        <a href="page-inbox-compose.html#">垃圾箱</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--使用局部试图 收件箱/发件箱/邮件详情 -->

    <div class="col-lg-9 col-md-8 col-sm-8 col-xs-12">
        <div class="panel bk-bg-white">
            <div class="panel-body message mailbox-btn-action">
                <div class="col-md-12">
                    <span class="item-action-group">
                        <a class="item-action fa fa-star" href="#"></a>
                        <a class="item-action fa fa-star-o" href="#"></a>
                        <a class="item-action fa fa-bookmark-o" href="#"></a>
                    </span>
                    <span class="item-action-group">
                        <a class="item-action fa fa-mail-reply" href="#"></a>
                        <a class="item-action fa fa-mail-reply-all" href="#"></a>
                        <a class="item-action fa fa-mail-forward" href="#"></a>
                    </span>
                    <span class="item-action-group">
                        <a class="item-action fa fa-trash-o" href="#"></a>
                        <a class="item-action fa fa-tags" href="#"></a>
                    </span>
                </div>
                <div class="col-md-12">
                    <div class="message-title">Contrary to popular belief, Lorem Ipsum is not simply random text.</div>
                    <div class="header">
                        <img class="avatar" src="@Url.Content("~/Assets/img/avatar.jpg")">
                        <div class="from">
                            <span>Jhon Smith</span>
                            jhonsmith@mail.com
                        </div>
                        <div class="date"><span class="fa fa-paper-clip"></span> Today, <b>08:45 AM</b></div>
                        <div class="menu"></div>
                    </div>
                    <div class="content">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                        <blockquote>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </blockquote>
                    </div>
                    <div class="attachments">
                        <ul>
                            <li class="col-xs-12">
                                <span class="label label-danger">pdf</span> <b>File.pdf</b> <i>(5.3KB)</i>
                                <span class="quickMenu">
                                    <a href="page-inbox-message.html#" class="fa fa-search"><i></i></a>
                                    <a href="page-inbox-message.html#" class="fa fa-share"><i></i></a>
                                    <a href="page-inbox-message.html#" class="fa fa-cloud-download"><i></i></a>
                                </span>
                            </li>
                            <li class="col-xs-12">
                                <span class="label label-info">txt</span> <b>File.txt</b> <i>(7KB)</i>
                                <span class="quickMenu">
                                    <a href="page-inbox-message.html#" class="fa fa-search"><i></i></a>
                                    <a href="page-inbox-message.html#" class="fa fa-share"><i></i></a>
                                    <a href="page-inbox-message.html#" class="fa fa-cloud-download"><i></i></a>
                                </span>
                            </li>
                            <li class="col-xs-12">
                                <span class="label label-success">xls</span> <b>File.xls</b> <i>(984KB)</i>
                                <span class="quickMenu">
                                    <a href="page-inbox-message.html#" class="fa fa-search"><i></i></a>
                                    <a href="page-inbox-message.html#" class="fa fa-share"><i></i></a>
                                    <a href="page-inbox-message.html#" class="fa fa-cloud-download"><i></i></a>
                                </span>
                            </li>
                            <li class="col-xs-12">
                                <span class="label label-success">zip</span> <b>File.zip</b> <i>(1.25MB)</i>
                                <span class="quickMenu">
                                    <a href="page-inbox-message.html#" class="fa fa-search"><i></i></a>
                                    <a href="page-inbox-message.html#" class="fa fa-share"><i></i></a>
                                    <a href="page-inbox-message.html#" class="fa fa-cloud-download"><i></i></a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--使用局部试图-->
</div>
